<!-- Author:Rain -->

<template>
    <div class="wrapedit">
        <div class="self-assess-edit">
            
            <el-popover popper-style="background:#fff" ref="popover" :hide-after="10000" :show-after="5000" placement="bottom-start" title="小睿联想提示" :width="320" trigger="click">
                <slot>
                    我对前端技术充满热情，对编程充满激情。我勇于面对困难，善于迎接挑战，并始终保持勤奋好学和乐观进取的态度。我拥有强大的自学能力，能够迅速掌握新知识和技能。

在团队合作中，我多次担任项目队长和课设组长，能够有效地激发团队成员的积极性。我具备出色的沟通能力和协调能力，能够促进团队内部的协作和合作。我致力于推动团队向前发展，实现共同目标，并能够在困难情况下保持乐观和积极的态度。

                </slot>
                <template #reference>
                    <RainText @sendText="val => forjobInfo.advantage = val" :value="forjobInfo.advantage" title="优势亮点"
                    placeholder="请简要描述你的职业优势" />
                </template>
            </el-popover>
        </div>
        <div class="resume-edit-btn">
            <button type="button" @click="cancel" class="ant-btn ant-btn-lg btn-cancel"><span>取消</span></button>
            <button type="button" @click="submit"
                class="ant-btn ant-btn-primary ant-btn-lg btn-submit"><span>确定</span></button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RainText } from "@/components/formitems/index"
import { updateForjobInfo } from "@/api/user/index"
import type { forJobInfo } from "@/api/user/types"
const emit = defineEmits(["close"])
const props = defineProps(['forjobInfo'])
const { forjobInfo } = toRefs(props)//变成响应式的

function cancel() {
    emit("close")
}

function submit() {
    //进行数据存储，提交
    let ForjobInfo: any = {
        advantage: forjobInfo?.value.advantage,
        salary: {}
    }

    //数据更新提交
    updateForjobInfo(ForjobInfo).then(val => {
        console.log(val);
        //弹出更新数据成功
        ElMessage({
            message: "数据更新成功~",
            type: 'success',
        })
        emit("close")
    }).catch(err => {
        console.log(err);
        ElMessage({
            message: "数据更新失败！",
            type: 'error',
        })
    })
}

</script>

<style scoped>
.self-assess-edit {
    padding: 5px 32px;
    margin-bottom: 20px;
}

.wrapedit {
    background-color: #f6f8fb;
    padding: 20px 0;
}

/* 简历按钮样式 */
.resume-edit-btn {
    text-align: right;
    padding: 0 56px;
}

.resume-edit-btn .btn-cancel,
.resume-edit-btn .btn-submit {
    width: 100px;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

.resume-edit-btn .btn-submit {
    color: #fff;
    background-color: #ff6400;
    border: 1px solid;
}

.resume-edit-btn .btn-cancel {
    margin-right: 16px;
    border: 1px solid #ff6400;
    color: #ff6400;
}
</style>